<script lang="ts">
export default {
  name: "xt-button",
};
</script>

<script setup lang="ts">
import { ElButton } from "element-plus";
import debounce from "lodash/debounce";
import Typings from "../../../typings";

interface Props {
  [propName: string]: any;
  type?: Typings.Button.type;
  debounce?: Typings.Button.debounce;
  debounceOptions?: Typings.Button.debounceOptions;
}

const props = withDefaults(defineProps<Props>(), {
  type: "primary",
  debounce: 300,
  debounceOptions: {
    leading: true,
    trailing: false,
  },
});

const emit = defineEmits(["click"]);

// 点击事件
const handleClick = debounce(
  function () {
    emit("click");
  },
  props.debounce,
  props.debounceOptions
);
</script>

<template>
  <el-button class="xt-button" :type="type" @click="handleClick">
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-button>
</template>

<style lang="scss">
@use "../../../scss/xt-button.scss";
</style>
